<template>
	<view class="cu-modal bottom-modal" :class="{ show: show }">
		<view class="cu-dialog dialog-wrap" :style="{ maxHeight: maxHeight }">
			<view class="cu-bar bg-white">
				<view class="action text-gray" @tap="hideModal"><text class="cuIcon-close"></text></view>
				<view class="content">选择所在区域</view>
				<view class="action text-green" @tap="selectRegion"><text class="cuIcon-check"></text></view>
				
			</view>
			<view class="content-warp">
				<picker-view :value="current" @change="bindChange" :indicator-style="indicatorStyle" style="width: 100%; height: 300px;">
					<picker-view-column>
						<view class="item" v-for="(item,index) in list" :key="index">{{item.area_group_name}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in currentChild" :key="item.area_id">{{item.name}}</view>
					</picker-view-column>
				</picker-view>
				<!-- <view class="cu-bar search bg-white">
					<view class="search-form round">
						<text class="cuIcon-search"></text>
						<label><input :adjust-position="false" v-model="keyword" type="text" placeholder="搜索地区、学校" confirm-type="search" /></label>
					</view>
					<view class="action"><button class="cu-btn bg-primary shadow-blur round" @tap="search(keyword)">搜索</button></view>
				</view>
				<view class="cu-list menu list-wrap">
					<block v-for="(item, index) in currentList" v-show="currentList.lenght > 0" :index="index">
						<view class="cu-item" @tap="selectRegion(item)">
							<view class="content text-left">
								<text class="text-grey">{{ item.name }}</text>
							</view>
							<view class="action text-gray">{{ item.distance ? item.distance / 1000 + 'KM' : ''}}</view>
						</view>
					</block>
					<image class="empty-icon" v-if="currentList.length == 0" src="http://www.mescroll.com/img/mescroll-empty.png?v=1"></image>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
import { PAGE_SIZE } from '@/common/tools/config.js';
// 引入SDK核心类
const QQMapWX = require('@/plugins/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.js');
let qqmapsdk = new QQMapWX({
	key: 'OFSBZ-RDS36-OJ5S7-MDOHB-BTT35-MYBB3'
});
export default {
	name: 'select-region',
	props: {
		value: {},
		maxHeight: {
			type: String,
			default: '500px'
		},
		list: {}
	},
	watch: {
		value(value) {
			this.show = value;
		},
		show(value) {
			this.$emit('input', value);
		},
		// list(list) {
		// 	uni.getSetting({
		// 		success: res => {
		// 			const coordinateList = list.map(v => { return v.longitude_and_latitude})
		// 			const coordinate = coordinateList.join(';');
		// 			if (res.authSetting['scope.userLocation']) {
		// 				uni.getLocation({
		// 					type: 'wgs84',
		// 					success: res => {
		// 						qqmapsdk.calculateDistance({
		// 							mode: 'driving',
		// 							from: `${res.latitude},${res.longitude}`,
		// 							to: coordinate,
		// 							success: distance => {
		// 								const elements = distance.result.elements;
		// 								this.currentList = list.map((val, index) => {
		// 									val['distance'] = elements[index].distance;
		// 									return val
		// 								});
		// 							}
		// 						});
		// 					}
		// 				});
						
		// 			}else {
		// 				this.currentList = list
		// 			}
		// 		}
		// 	});
		// }
	},
	computed: {
		currentChild() {
			return this.list.length > 0 ? this.list[this.current[0]].area : []
		}
	},
	data() {
		return {
			keyword: '',
			show: false,
			currentList: [],
			current: [0, 0],
			indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`
		};
	},
	methods: {
		bindChange(e) {
			this.current = e.detail.value
		},
		selectRegion() {
			setTimeout(() => {
				this.$emit('selectRegion', this.currentChild[this.current[1]] || '');
			}, 1000)
			this.hideModal();
		},
		search(keyword) {
			this.$emit('search', keyword);
		},
		hideModal() {
			this.show = false;
		},
	}
};
</script>

<style scoped lang="scss">
/*.cu-item::after {*/
/*    border: none !important;*/
/*}*/
.dialog-wrap {
	border-radius: 20px 20px 0 0 !important;
}
.content-warp {
	min-height: 500rpx;
	background: #fff;
	.cu-bar {
		position: fixed;
		z-index: 10;
		width: 680rpx;
		margin-top: 100rpx;
	}
	.list-wrap {
		padding-top: 200rpx;
	}

	.empty-icon {
		height: 151px;
		width: 45%;
	}
	.item {
	    line-height: 48px;
	    text-align: center;
	}
}
</style>
